<template lang="jade">

	div.search.cbox
		li.input
			input.kw(v-show="show_kw", type="text", v-model="keywords")

			dl.cbox.nptype(v-show="!show_kw")
				dd(v-bind:class="{ 'on': productype == 'current'}",v-on:click="setList('current')") 投标理财
				dd(v-bind:class="{ 'on': productype == 'group'}",v-on:click="setList('group')") 房利宝

		//li.btn
			i.iconfont(@click="searchByKW") &#xe62b;

	div#productlist.top.bottom
		ul.productlist(v-infinite-scroll="down()", infinite-scroll-disabled="busy", infinite-scroll-distance="100")
			li(:is="productype", :productype="productype", v-for="(index, item) in items", :item.sync="item", :items.sync="items")
		div.loading(v-if="busy")
			span {{loading}}
</template>

<script>
//import '../assets/sass/common/circle.scss'
//import CssCircle from '../v-circle/components/css-circle.vue'
import ProductView from '../components/index/product'
import ReviewView from '../components/index/product'
import GroupView from '../components/index/product'
import {c_borrow_list, Api_Group_List} from '../config/api'
import {Progress, Swiper, Flexbox, FlexboxItem} from 'vux';

import api from '../data/api';

var vm = this;
export default{

	/*props:['item'],

	created() {
		this.fetch(1);
	},*/

	data(){
		return{
			productype:"current",
			listId:'',
			busy:true,
			show_kw:false,
			items: [],
			obj: [],
			page:1,
			keywords:'',
			page:1,
			name_no_status:'',
			loading:'数据加载中...'
		}
	},
	components: {
		current:ProductView,
		group:GroupView,
		progress:Progress,
		swiper:Swiper,
		flexbox:Flexbox,
		flexboxItem:FlexboxItem
	},
	events:{
		'get': function (msg) {
			//console.log(msg)
			this.page = 1;
			this.listId = msg
			this.fetch(1);
			//this.$route.router.go('/invest/index?productype=current&listId='+msg)
		}
	},

	methods:{



		down: function() {
		  if(this.busy == true || this.items == ''){
			return false;
		  }
		  this.busy = true;
		  //this.fetch(++this.page);
		  if(this.productype=='current' || this.productype =="review")
			this.fetch(++this.page);
		  else
			this.group_fetch(++this.page);
		},

		searchByKW(){
			var that = this;
			if(!show_kw){
				this.show_kw = true;
				return;
			}
			this.fetch(1);
		},

		setList: function (key) {
			this.$store.dispatch('setShowLoading', true);
			this.productype = key;
			this.listId = '';
			this.busy = true;
			this.items=this.obj=[];
			this.page=1;
			if(key=='current' || key =="review")
				this.fetch(1);
			else
				this.group_fetch(1);


			//this.$route.router.go('/invest/'+key+'/index')
			this.$route.router.go('/invest/index?productype='+key)
			//this.$dispatch('show_data');
		},


		async fetch(page){

			var data = {'page': page}
			this.$http({url: c_borrow_list+'&page='+page+'&name_no='+this.listId, method: 'GET'}).then(function (rs) {

				var data = rs.data.data, status = rs.data.status
				this.$store.dispatch('setShowLoading', false);

				if(status){
					this.items = this.items.concat(rs.data.data);
					this.busy = false;
				}else{
					this.loading = "没有更多数据了!";
					this.busy = true;
				}

			});


		},



		group_fetch: function (page) {

		  this.productype = 'group';
		  var data = {'page': page}
		  this.$http({url:Api_Group_List+'&page='+page, method:'GET'}).then(function(rs){



			  var data = rs.data.data, status = rs.data.status
			  if(status){
				this.items = this.items.concat(rs.data.data);
				this.obj = Object.assign([], this.obj.concat(rs.data.data));
				this.busy = false;

			  }else{
			  	this.loading = "没有更多数据了!";
			  	this.busy = true;
			  }
			  this.$store.dispatch('setShowLoading', false);

		  });


		}
	},
	route: {
		activate ( transition ) {
			document.title = "投标理财 - 有喜财富手机版"
			this.listId = transition.to.query.listId
			this.productype = transition.to.query.productype;
			if(this.productype == undefined) this.productype = "current";
			if(this.listId == undefined || this.listId == "index") this.listId = "";

			this.items = [];
			transition.next();
			this.$store.dispatch('setShowLoading', true);
			if(this.productype=='current' || this.productype =="review")
				this.fetch(1);
			else
				this.group_fetch(1);
		}
	}
}
</script>
